<template>
  <body>
  <div class="background">
    <img src="static/background.jpg" width="100%" height="100%" alt=""/>
  </div>
  <el-page-header @back="goBack" content="购物车详情" style="margin-top: -2%">
  </el-page-header>
  <div>
    <el-card class="card">
      <el-button type="primary" style="margin-left: -83.5%;margin-top: 5%;font-size: 18px" @click="toggleSelection()">删除勾选项</el-button>
      <h2 style="margin-top: -5%;margin-left: -2%">购物车</h2>
      <div class="table" style="width: 100%;height: 100%;">
      <el-table
        ref="multipleTable"
        style="background: hsla(0, 0%, 80%, .25) border-box;height: 588px;font-size: 18px"
        :data="shops.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border
        stripe
        height="600"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection">
        </el-table-column>
        <el-table-column
          v-for="info in rightHeader" :key="info.key"
          :property="info.key"
          :label="info.label"
        >
          <template slot-scope="scope">
            {{scope.row[scope.column.property]}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="goumai(scope.row)" style="font-size: 18px">购买</el-button>
            <el-button @click="shanchu(scope.row['shopId'])" style="font-size: 18px">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <el-row style="margin-top: 1%;margin-left: -1%">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="shops.length"
          layout="total, prev, pager, next, jumper">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
  </body>
</template>

<script>
  export default {
    data() {
      return {
        shops: [
          {
            shopId: '',
            customerId: '',
            bookId: '',
            orderNumber: '',
            money: '',
            bookName: ''
          },
        ],
        bill: {
          customerId: '',
          bookId:'',
          bookName: '',
          price: '',
          orderNumber: '',
          money: '',
          date:'',
          address:'',
          phoneNumber:'',
          deliveryId:''
        },
        rightHeader: [
          {
            label: '书名',
            key: 'bookName'
          },
          {
            label: '数量(本)',
            key: 'orderNumber'
          },
          {
            label: '价格(元)',
            key: 'money'
          }
        ],
        currentPage: 1,
        pageSize: 7,
        multipleSelection: [],
      };
    },
    created() {
      this.load();
    },
    methods: {
      addDate() {
        let nowDate = new Date();
        let date1 = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
        };
        if (date1.month >= 1 && date1.month <= 9) {
          date1.month = "0" + date1.month;
        }
        if (date1.date >= 0 && date1.date <= 9) {
          date1.date = "0" + date1.date;
        }
        let systemDate = date1.year + '-' + date1.month + '-' + date1.date;
        return systemDate;
      },
      load(){
        this.$axios.post('/money/selectShop1/' + this.$store.state.customerId)
          .then(resp => {
            if (resp.data.code == 200) {
              this.shops = resp.data.data;
            }
          })
      },
      goBack() {
        this.$router.go(-1);
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
      },
      goumai(e) {
        this.$confirm('是否确认购买?', '提示', {}).then(() => {
          this.bill.money=e.money;
          this.bill.orderNumber=e.orderNumber;
          this.bill.deliveryId=1;
          this.bill.bookId=e.bookId;
          this.bill.bookName=e.bookName;
          this.bill.date=this.addDate();
          this.bill.customerId=this.$store.state.customerId;
          this.$axios.post('/money/insertShop', this.bill)
            .then(resp => {
              if (resp.data.code == 200) {
                this.$alert("购买成功!", '提示', {
                  confirmButtonText: '确定'
                });
              } else {
                this.$alert(resp.data.msg, '提示', {
                  confirmButtonText: '确定'
                });
              }
            })
        }).catch(() => {
          this.$message({
            message: '取消购买',
            type: 'failed'
          })
        });
      },
      shanchu(e) {
        this.$confirm('是否确认删除?', '提示', {}).then(() => {
          this.$axios.post('/money/deleteShop1/'+ e)
            .then(resp => {
              this.$alert("删除成功!", '提示', {
                confirmButtonText: '确定'
              });
              this.load();
            })
        }).catch(() => {
          this.$message({
            message: '取消删除',
            type: 'failed'
          })
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      toggleSelection(rows) {
        this.$confirm('是否确认删除？', '提示', {
        }).then(() => {
          let len=this.multipleSelection.length,i,flag=0;
          for(i=0;i<len;i++){
            console.log(this.multipleSelection[i].shopId);
            this.$axios.post('/money/deleteShop1/'+this.multipleSelection[i].shopId);
          }
          this.$alert("删除成功!", '提示', {
            confirmButtonText: '确定',
            callback:action=>{
              this.load();
            }
          });
        }).catch(() => { this.$message({
          message: '取消删除',
          type: 'failed'
        })});
      },
    }
  };
</script>

<style scoped>
  .background {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }

  .card {
    position: relative;
    width: 875px;
    margin-top: 0%;
    margin-left: 28%;
    padding: 1em;
    background: hsla(0, 0%, 50%, .25) border-box;
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
  }

  .table /deep/ .el-table th {
    background: hsla(0, 0%, 80%, .25) border-box;
    color: black;
  }

  .table /deep/ .el-table tr {
    background: hsla(0, 0%, 80%, .25) border-box;
    color: black;
  }
  .table /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background: hsla(0, 0%, 80%, .25) border-box;
    color: black;
  }

</style>
